<template>
  <view class='list_page'>
    <view class='article_item' v-for='(article,article_index) in list' :key='article_index'>
      <view class='article'>
        <view class='title' :class='{ancive_title:article.height == 0}' @tap='lookArticle(article_index)'>
          <!-- <view class='img_item'><image src='https://s1.ax1x.com/2020/04/28/J4zBZD.jpg'></image></view> -->
          <!-- <view class='text_item' :class='{title_up:article.height == 0}'> -->
          <view class='text_item' :class='{title_up:true}'>
            <!-- <text>【<text class='topic'>#故宫年客流量1900万破纪录#</text>】</text> -->
            {{article.title}}
          </view>
          <view class='num'><view>{{article.num}}</view></view>
        </view>
        <view class='article_content' v-if="article_index == show_index">
          <view class='content_box' :class='"content"+article_index'>
            <view>
              <view class='article_info'>
                <text>{{time(article.info.publishTime,"MM-DD hh:mm")}}</text>
                <text class='platform'>{{article.info.siteName}}</text>
                <text>{{article.info.addOn}}由<text class='author'>{{article.info.addUser}}</text>添加</text>
              </view>
              <view class='article_hint'>{{article.info.allLikeNum}}篇相似文章，今日增加{{article.info.todayLikeNum}}篇，有{{article.info.keyLike}}个重点人参与</view>
              <view class='article_list' v-if='false'>
                <view v-for='(item,index) in 5' :key='index'>
                  <text>【12-25 12:34 浙江日报】</text><text>湖州雾霾如此严重，说好的青山绿湖州雾霾如此严重，说好的青山绿</text>
                </view>
              </view>
              <view class='btn_box'>
                <button class='btn' @tap='lookRemark(article_index)'>查看备注</button>
                <button class='btn' @tap='finish(article.articleId,article_index)'>办结</button>
              </view>
            </view>

          </view>
          
        </view>
      </view>
      <!-- 收起按钮 弃用 -->
      <view class='up_btn' v-if='false'>
        <view></view>
        <view></view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      list: Array
    },
    data() {
      return {
        time: this.$time,
        show_index: -1,   // 记录已经展开的文章
        list_change: 0,
      }
    },
    computed: {
        status() {
            return this.$store.state.remark_status
        },
    },
    watch: {
        list() {
          if(this.list_change == 0) {
            this.lookArticle(0)
          }
          this.list_change++;
        },
        status(val) {
            if(!val) {
                this.list[this.show_index].info.remarkList = this.$store.state.remark_data;
            }
        },
    },
    mounted() {
      
    },
    methods: {
      // 获取详情
      getTrack(item,index) {
        uni.showLoading({
            title: '正在加载..'
        });
        this.$http({
          url: this.$api.attention.get_track,
          data: {
            articleId:item.articleId
          }
        }).then( res => {
          uni.hideLoading();
          if(res.code == 0) {
            item.info = res.data;
            this.show_index = index;
            this.$emit('chang')
          }else {
            uni.showToast({
              title: '请求失败',
              icon: "none"
            });
          }
        }).catch(err => {
          uni.showToast({
              title: '请求失败',
              icon: "none"
          });
        })
      },
      // 查看文章
      lookArticle(index) {
        let item = this.list[index];
        if(item.info) {
          this.show_index == index?this.show_index = -1:this.show_index = index;
          this.$emit('chang')
        }else {
          this.getTrack(item,index)
        }
      },
      // 点击查看备注
      lookRemark(index) {
        let remark_list = this.list[index].info.remarkList;
        this.$store.state.article_id = this.list[index].articleId;
        this.$store.state.remark_data = remark_list;
        this.$store.state.remark_status = true;
      },
      // 办结
      finish(articleId,index) {
        let self = this;
        uni.showModal({
          title: '提示',
          content: '确定办结吗？',
          success(res) {
              if (res.confirm) {
                self.$http({
                  url: self.$api.attention.finish,
                  data: {
                    articleId
                  }
                }).then( res => {
                  if(res.code == 0) {
                    self.list.splice(index,1)
                    uni.showToast({
                        title: '操作成功！',
                        duration: 2000
                    });
                  }else {
                     uni.showToast({
                        title: '操作失败',
                        icon: 'none'
                    });
                  }
                }).catch( err => {
                   uni.showToast({
                        title: '操作失败',
                        icon: 'none'
                    });
                })
              }
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
.list_page {
  width: 100%;
  padding: 30upx 20upx 20upx;
  box-sizing: border-box;
  .article_item {
    width: 100%;
    margin-bottom: 30upx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .article {
      width: 100%;
      box-shadow: 0px 0px 10upx 0px rgba(34,34,34,0.04);
      border-radius: 12upx;
      padding: 30upx 23upx;
      box-sizing: border-box;
      background: #fff;
      .title {
        width: 100%;
        display: flex;
        .img_item {
          width: 60upx;
          height: 60upx;
          overflow: hidden;
          border-radius: 100%;
          margin-right: 10upx;
          >image {
            width: 100%;
            height: 100%;
          }
        }
        .text_item {
          flex: 1;
          font-size: 30upx;
          font-weight: 800;
          .topic {
            color: #0084FF;
          }
        }
        .title_up {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .num {
          width: 67upx;
          display: flex;
          justify-content: center;
          padding-top: 8upx;
          >view {
            width: 36upx;
            height: 36upx;
            background: #D50D0D;
            border-radius:50%;
            font-size: 24upx;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
      .ancive_title {
        align-items: center;
      }
      .article_content {
        width: 100%;
        overflow: hidden;
        transition: all .5s;
        .content_box {
          width: 100%;
          background: #fff;
          .article_info {
            font-size: 24upx;
            color:#999;
            padding-top: 26upx;
            .platform {
              margin: 0 20upx;
            }
            >text {
              .author {
                margin: 0 15upx;
              }
            }
          }
          .article_hint {
            font-size: 28upx;
            color: #D50D0D;
            font-weight: 600;
            margin-top: 26upx;
          }
          .article_list {
            width: 100%;
            margin-top: 26upx;
            >view {
              width: 100%;
              height: 70upx;
              display: flex;
              align-items: center;
              white-space: nowrap;
              border-top: 1px dashed #E2E2E2;
              font-size: 28upx;
              color: #0084FF;
              >text:nth-child(2) {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #666;
              }
            }
          }
          .tracking_info {
            width: 100%;
            padding: 25upx;
            box-sizing: border-box;
            font-size: 24upx;
            color: #333;
            background: #F7F7F7;
            margin: 0;
            >view {
              margin-top: 5upx;
              &:nth-last-child(1) {
                margin: 0;
              }
            }
          }
          .article_input {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 26upx;
            >view {
              width: 426upx;
              height: 60upx;
              background:#EEEEEE;
              border-radius: 6upx;
              >input {
                width: 100%;
                height: 100%;
                font-size: 24upx;
                padding: 0 20upx;
                box-sizing: border-box;
              }
            }
            >button {
              width: 96upx;
              height: 60upx;
              border: 1px solid rgba(0,132,255,1);
              border-radius: 6upx;
              font-size: 24upx;
              color: #0084FF;
              padding: 0;
              margin: 0;
              background: #fff;
              display: flex;
              align-items: center;
              justify-content: center;
              &::after {
                border: none;
              }
            }
          }
          .btn_box {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-top: 20upx;
            >button {
              width: 120upx;
              height: 50upx;
              font-size: 22upx;
              margin-left: 20upx;
              &:nth-child(1) {
                background: #fff;
                color: #0084FF;
                border: 1px solid #0084FF;
                box-sizing: border-box;
              }
            }
          }
        }
      }
      .height {
        height: 0
      }
    }
    .up_btn {
      width: 161upx;
      height: 36upx;
      background:#fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      margin: 0;
      >view {
        width:20upx;
        height:2upx;
        background:#ccc;
        border-radius:1px;
        margin-top: 7upx;
        &:nth-child(1) {
          margin: 0;
        }
      }
      &::after,&::before {
        content: "";
        width: 72upx;
        height: 72upx;
        background: #eee;
        position: absolute;
        top: 0;
      }
      &::after {
        right: -58upx;
        transform: rotate(25deg);
      }
      &::before {
        left: -58upx;
        transform: rotate(-25deg);
      }
    }
  }
}
</style>